<template>
	<view>
		<view class="fl-s-c" style="padding: 0 180rpx;">
			<image src="/static/images/tab1/map.png" class="m-t-50" style="width: 53rpx; height: 69rpx;" mode="">
			</image>
			<text
				class="t-c fs-28 c-33 bold m-t-25">{{info.residevice+info.residecity+info.residedist+info.address}}</text>
		</view>
		<view class="row-bar m-t-25"></view>
		<view class="w-1 fl-s-s p-r-30">
			<view class="w-1 fr-b-c p-r-30 m-t-20 pbox">
				<text class="flex-1 m-r-10 bold text-line-1 c-33 fs-28">{{info.username}} {{info.mobile}}</text>
				<image @click="call(info.mobile)" src="/static/images/tab1/phone.png"
					style="width: 60rpx; height: 60rpx;" mode=""></image>
			</view>
			<text class="c-33 fs-28 bold m-t-40">请上传到达照片</text>
			<view class="w-1 fl-s-s m-t-20">
				<up-upload :sizeType="['compressed']" :fileList="fileList1" @afterRead="afterRead"
					@delete="deletePic" name="1" :multiple="false" width="156rpx" height="156rpx" :maxCount="1">
					<view class="fl-c br-20" style="width: 156rpx; height: 156rpx; background: #f3f3f3;">
						<image :src="$path + '/tab1/camera.png'" style="width: 51rpx; height: 49rpx;" mode=""></image>
						<text class="fs-20 c-77">上传图片</text>
					</view>
				</up-upload>
			</view>
		</view>

		<view class="iphonex" v-if="flag">
			<view class="w-1 p-30">
				<move-verify @vertify='vertifyResult'></move-verify>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		baseUrl
	} from '@/utils/base.js';
	import moveVerify from '@/components/move-verify/move-verify.vue'


	const id = ref(0)
	const sn = ref(0)
	onLoad(o => {
		id.value = o.id;
		sn.value = o.sn;
		getinfo()
	})


	const info = ref('')

	function getinfo(loading = true) {
		uni.$post({
			url: '/api/Ordersystem/sworderlis',
			data: {
				ordersn: sn.value,
				op: 2
			},
			loading
		}).then(res => {
			info.value = res.data;
		})
	}

	function call(val) {
		uni.makePhoneCall({
			phoneNumber: String(val)
		})
	}

	const serviceimg = ref('')
	const fileList1 = ref([]);
	watch(fileList1, val => {
		console.log('图片val', val)
		let arr = []
		val.map(item => {
			if (item.status == 'success') {
				// arr.push('/uploads/' + item.url.split('/uploads/')[1])
				arr.push(item.url)
			}
		})
		serviceimg.value = arr.join(',')
	}, {
		deep: true
	})

	/**
	 * 滑动验证
	 */
	const flag = ref(true)

	function vertifyResult(vertify) {
		console.log(serviceimg.value)
		if (!serviceimg.value && vertify) {
			flag.value = false
			uni.showModal({
				title: '提示',
				content: '请上传到达图片',
				showCancel: false,
				success: (res) => {
					flag.value = true;
				}
			})
			return
		};
		if (vertify) {
			uni.$post({
				url: '/api/Ordersystem/tocourieronorder',
				data: {
					aid: id.value,
					type: 4,
					serviceimg: serviceimg.value
				}
			}).then(res => {
				getApp().tt(res.msg, 'success')
				uni.$emit('reorder')
				uni.$emit('red2')
				
				uni.$delayBack()
			})
		}
	}


	// 删除图片
	const deletePic = (event) => {
		const arr = ref([]);
		switch (event.name * 1) {
			case 1:
				arr.value = fileList1.value;
				break;
			case 2:
				arr.value = fileList2.value;
				break;
			case 3:
				arr.value = fileList3.value;
				break;
		}
		arr.value.splice(event.index, 1);
	};
	// 新增图片
	const afterRead = async (event) => {
		const arr = ref([]);
		switch (event.name * 1) {
			case 1:
				arr.value = fileList1.value;
				break;
			case 2:
				arr.value = fileList2.value;
				break;
			case 3:
				arr.value = fileList3.value;
				break;
		}
		// 当设置 mutiple 为 true 时, file 为数组格式，否则为对象格式
		let lists = [].concat(event.file);
		let fileListLen = arr.value.length;
		lists.map((item) => {
			arr.value.push({
				...item,
				status: 'uploading',
				message: '上传中',
			});
		});
		for (let i = 0; i < lists.length; i++) {
			const result = await uploadFilePromise(lists[i].url);
			let item = arr.value[fileListLen];
			arr.value.splice(fileListLen, 1, {
				...item,
				status: 'success',
				message: '',
				url: result,
			});
			fileListLen++;
		}
	};

	const uploadFilePromise = (url) => {
		return new Promise((resolve, reject) => {
			let a = uni.uploadFile({
				url: baseUrl + '/api/Common/upload', // 仅为示例，非真实的接口地址
				filePath: url,
				name: 'file',
				header: {
					token: uni.getStorageSync('user').token
				},
				success: (res) => {
					setTimeout(() => {
						resolve(JSON.parse(res.data).data.fullurl)
					}, 1000);
				},
			});
		});
	};
</script>

<style>
	.row-bar {
		width: 750rpx;
		height: 20rpx;
		background: #F1F5F6;
		border-radius: 0rpx 0rpx 0rpx 0rpx;
	}


	.pbox {
		height: 88rpx;
		background: #F3F3F3;
		border-radius: 20rpx 20rpx 20rpx 20rpx;
	}
</style>